<template>
  <div class="newlyUser">
    <div class="dropdown">
      <el-button size="mini" @click="userDetails()">{{ $t('btn.reload') }}</el-button>
      <el-button type="primary" size="mini" @click="collate()">{{ $t('btn.save') }}</el-button>
      <el-button type="primary" size="mini" @click="pushView('/splicingConfig')">{{ $t('btn.list') }}</el-button>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane class="market" :label="$t('market.info')" name="first">
        <el-form ref="purchaseRef" :model="prodValue" label-width="100px" disabled>
          <el-form-item :label="$t('market.client')" prop="fname">
            <el-input v-model.trim="prodValue.fname" size="mini" />
          </el-form-item>
          <el-form-item :label="$t('shop.fnumber')" prop="fphone">
            <el-input v-model.trim="prodValue.fnumber" size="mini" />
          </el-form-item>
          <el-form-item :label="$t('shop.type')" prop="fsex">
            <el-select v-model.trim="prodValue.ftype" size="mini">
              <el-option v-for="item in staffDate" :key="item.fdescripTion" :label="item.fname" :value="item.fdescripTion" />
            </el-select>
          </el-form-item>
        </el-form>
        <div style="margin-top: 10px;">
          <el-button size="mini" style="margin-bottom: 5px;" @click="newHang">{{ $t('btn.newHang') }}<!--新增行--></el-button>
          <el-button size="mini" style="margin-bottom: 5px;" @click="delHang">{{ $t('btn.delHang') }}<!--删除行--></el-button>
        </div>
        <jc-table
          :table-data="tableData"
          :table-header="tableHeader"
          :table-height="tableHeight"
          @rowClick="rowClick"
        >
          <el-table-column :label="$t('shop.numIndex')" prop="fseq" width="80" align="center">
            <template slot-scope="scope">
              <el-input v-model.trim="scope.row.fseq" size="mini" />
            </template>
          </el-table-column>
          <el-table-column :label="$t('shop.name1')" prop="fname" width="160" align="center">
            <template slot-scope="scope">
              <el-input v-model.trim="scope.row.fname" size="mini" />
            </template>
          </el-table-column>
          <el-table-column :label="$t('market.field')" prop="ffield" width="160" align="center">
            <template slot-scope="scope">
              <el-input v-model.trim="scope.row.ffield" size="mini" />
            </template>
          </el-table-column>
          <el-table-column :label="$t('market.handle')" width="160" align="center">
            <template slot-scope="scope">
              <el-button type="danger" size="mini" @click="delHang(scope.$index)">{{ $t('btn.delHang') }}</el-button>
            </template>
          </el-table-column>
        </jc-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  splicingDetails, splicingUpdate
} from '@/api/basicManagement/userGroup'
import { queryViewItem } from '@/api/marketManage/marketOrder'
export default {
  data() {
    return {
      activeName: 'first',
      prodValue: {
      },
      tableData: [],
      staffDate: [],
      indexSelf: 0,
      tableHeader: [],
      tableHeight: '65vh'
    }
  },
  created() {
    if (this.$route.params.id) {
      this.userDetails()
      this.queryBilType()
    }
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 260px)' : '65vh'
  },
  methods: {
    // 单据类型
    async queryBilType() {
      const DATA = {
        viewName: 'JOIN_SETTING_TYPE'
      }
      const { data: RES } = await queryViewItem(DATA)
      this.staffDate = RES.list
    },
    pushView(ev) {
      this.$router.push({ path: ev })
    },
    // 保存
    collate() {
      const DATA = {
        fid: this.$route.params.id,
        details: this.tableData
      }
      splicingUpdate(DATA).then(res => {
        if (res.code === 0) {
          this.userDetails()
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 详情
    userDetails() {
      const DATA = {
        fid: this.$route.params.id
      }
      splicingDetails(DATA).then(res => {
        if (res.code === 0) {
          this.prodValue = res.data
          this.tableData = this.prodValue.details
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 点击操作记录
    handleTabClick(tab) {
      if (tab.name === 'second') {
        // 操作记录
      }
    },
    // 获取用户分组
    primaryGroup(ev) {
      if (ev.fid) {
        this.prodValue.fprimarygroup = ev.fid
        this.prodValue.fusergroupname = ev.fname
      }
      this.groupVisiblit = false
    },
    // 新增行
    newHang() {
      this.tableData.push({
        fseq: this.tableData.length + 1,
        fname: '',
        ffield: ''
      })
    },
    // 单击行
    rowClick(row) {
      this.indexSelf = row.index
    },
    // 删除行
    delHang(index) {
      this.tableData.splice(this.indexSelf || index, 1)
    }
  }
}
</script>

<style scoped lang="scss">
.newlyUser {
  @include listBom;
  .el-input::v-deep .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
  .el-form {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      height: 30px;
      width: 275px;
      margin-bottom: 10px;
      //&::v-deep .el-input--mini .el-input__inner{
      //  height: 22px;
      //}
      .btnType {
        margin-right: 20px;
      }
      .el-date-editor.el-input {
        width: 100% !important;
      }

      .el-select {
        width: 100%;
      }
    }
  }
}
</style>
